<template>
  <div class="relative w-full h-full">
    <PageHeader title="积分设置" />

    <div class="settings-container p-4">
      <el-form
        :model="formData"
        label-width="180px"
        ref="formRef"
        :rules="rules"
      >
        <!-- 积分获取比例设置 -->
        <el-form-item label="积分获取比例设置" prop="earnRatio">
          <el-input-number
            v-model="formData.earnRatio"
            :min="0"
            :max="100"
            :precision="2"
            :step="0.1"
            controls-position="right"
            style="width: 200px"
          />
          <div class="ml32 fs-12 color-999999">
            （购买平台商品获得积分百分比设置）
          </div>
        </el-form-item>

        <!-- 积分抵扣比例设置 -->
        <el-form-item label="积分抵扣比例设置" prop="deductRatio">
          <el-input-number
            v-model="formData.deductRatio"
            :min="0"
            :max="100"
            :precision="2"
            :step="0.1"
            controls-position="right"
            style="width: 200px"
          />
          <div class="ml32 fs-12 color-999999">
            （购买平台商品积分抵扣百分比设置）
          </div>
        </el-form-item>

        <!-- 积分获取方式 -->
        <el-form-item label="积分获取方式" prop="earnMethod">
          <el-checkbox v-model="formData.earnMethod.purchase"
            >购买平台商品获取积分</el-checkbox
          >
        </el-form-item>

        <!-- 积分抵扣方式 -->
        <el-form-item label="积分抵扣方式" prop="deductMethod">
          <el-checkbox v-model="formData.deductMethod.purchase"
            >购买商品可使用积分进行抵扣</el-checkbox
          >
        </el-form-item>

        <!-- 积分规则说明 -->
        <el-form-item label="积分规则说明" prop="content">
          <div class="w-full">
            <EditorWang v-model="formData.content" />
          </div>
        </el-form-item>
      </el-form>

      <!-- 底部保存按钮 -->
      <div class="flex_jcc mt-6">
        <el-button type="primary" @click="saveSettings" size="large"
          >保存设置</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import EditorWang from "@/components/editorWang.vue";
import PageHeader from "@/components/PageHeader.vue";
import { ElMessage } from "element-plus";

const formRef = ref(null);

const formData = ref({
  earnRatio: 1.0, // 积分获取比例
  deductRatio: 0.5, // 积分抵扣比例
  earnMethod: {
    purchase: true, // 购买商品获取积分
  },
  deductMethod: {
    purchase: true, // 购买商品可使用积分抵扣
  },
  content: "", // 积分规则说明
});

const rules = {
  earnRatio: [
    { required: true, message: "请设置积分获取比例", trigger: "blur" },
  ],
  deductRatio: [
    { required: true, message: "请设置积分抵扣比例", trigger: "blur" },
  ],
  content: [{ required: true, message: "请填写积分规则说明", trigger: "blur" }],
};

// 保存设置
const saveSettings = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("提交的表单数据:", formData.value);
      // 这里应该调用API保存设置
      ElMessage.success("积分设置保存成功");
    } else {
      ElMessage.error("请完善表单信息");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.ml-180 {
  margin-left: 180px;
}
.ml-2 {
  margin-left: 2px;
}
.settings-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 32px 0;
  padding-right: 32px;
}
</style>
